<template>
  <div class="cont-area" style="overflow: hidden;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="mini" v-hasPermi="['bigdata:schedule:list']">查询</el-button>
        <el-button type="primary" @click="reset" size="mini">重置</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="danger" @click="handleDel()" size="mini" :disabled="this.multipleSelection.length < 1"
          v-hasPermi="['bigdata:schedule:remove']">批量删除</el-button>
      </el-form-item>
    </el-form>

    <div ref="tableAreaRef" class="table-area">
      <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" v-loading="isLoading"
        :height="tableHeight" @selection-change="handleSelectionChange" class="my-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="taskName" label="调度名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="flowName" label="工作流名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="engineName" label="资源" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createdBy" label="创建人" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="updatedBy" label="更新人" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="updatedTime" label="更新时间" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="releaseState" label="状态" width="80">
          <template slot-scope="scope">
            <div class="statusBox">
              <i class="dot" :class="getStatus(scope.row.releaseState).type"></i>
              <span>{{ getStatus(scope.row.releaseState).text }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <el-button v-if="!isOnline(scope.row)" type="text" size="small" @click="handleEdit(scope.row)"
              v-hasPermi="['bigdata:schedule:edit']">编辑</el-button>
            <el-button v-if="!isOnline(scope.row)" type="text" size="small" @click="handleOnline(scope.row)"
              v-hasPermi="['bigdata:schedule:online']">上线</el-button>
            <el-button v-if="isOnline(scope.row)" type="text" size="small" @click="handleOffline(scope.row)"
              class="offlineBtn" v-hasPermi="['bigdata:schedule:offline']">下线</el-button>
            <el-button v-if="!isOnline(scope.row)" type="text" size="small" @click="handleDel(scope.row)" class="danger"
              v-hasPermi="['bigdata:schedule:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Pagination :totalSize="totalSize" :page.sync="pageInfo.pageNo" :limit.sync="pageInfo.pageSize"
      @getList="getList" />
    <EditSchedule v-if="editScheduleShow" @getList="search" />
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import { mapActions, mapMutations, mapState } from 'vuex'
import { cloneDeep } from 'lodash'
import EditSchedule from '@/components/EditSchedule'
import Pagination from '@/components/Pagination'

@Component({
  components: {
    EditSchedule,
    Pagination
  },
  computed: {
    ...mapState({
      is_scheduler_enabled: state => state.global.is_scheduler_enabled
    })
  },
  methods: {
    ...mapActions({
      getSchedulesList: 'GET_SCHEDULE_LIST',
      getTaskInfo: 'GET_TASK_INFO',
      onlineSchedules: 'ONLINE_SCHEDULE',
      offlineSchedules: 'OFFLINE_SCHEDULE',
      deleteSchedule: 'DELETE_SCHEDULE',
      toggleSchedule: 'TOGGLE_SCHEDULE'
    }),
    ...mapActions('EditScheduleModal', {
      callEditScheduleModal: 'CALL_MODAL'
    })
  }
})

export default class SchedulesPage extends Vue {
  tableHeight = 400
  list = []
  multipleSelection = []
  totalSize = 0
  editScheduleShow = false
  isLoading = false
  form = {
    name: '',
  }
  pageInfo = {
    pageNo: 1,
    pageSize: 10,
  }

  get statusFiltersList() {
    return [
      { text: '下线', value: 'OFFLINE', type: 'err' },
      { text: '上线', value: 'ONLINE', type: 'success' },
    ]
  }

  getStatus(status) {
    const statusItem = this.statusFiltersList.find(v => v.value === status)
    return { text: statusItem.text, type: statusItem.type }
  }

  isOnline({ releaseState }) {
    return releaseState === 'ONLINE'
  }

  async handleOnline(row) {
    try {
      let id = row.taskId
      const res = await this.onlineSchedules(id)
      if (res.code == 100000) {
        this.msgSuccess('操作成功')
        this.search()
      }
      // this.checkResCode(res.code, this.search)
    } catch (e) {
      console.log(e)
    }
  }
  async handleOffline(row) {
    try {
      let id = row.taskId
      const res = await this.offlineSchedules(id)
      if (res.code == 100000) {
        this.msgSuccess('操作成功')
        this.search()
      }
      // this.checkResCode(res.code, this.search)
    } catch (e) {
      console.log(e)
    }
  }

  async handleEdit(row) {
    this.editScheduleShow = true
    // const res = await this.getTaskInfo(row.taskId)
    this.callEditScheduleModal({ editInfo: { type: 'edit', id: row.taskId }, data: row })
  }


  // 查询
  search() {
    this.pageInfo.pageNo = 1
    this.getList()
  }
  // 重置
  reset() {
    this.form.name = ''
    this.search()
  }
  // 获取列表
  async getList() {
    this.isLoading = true
    const pages = {
      ...this.pageInfo,
      taskName: this.form.name,
    }
    const res = await this.getSchedulesList(pages)
    if (res.code = 100000) {
      this.isLoading = false
      this.totalSize = Number(res.result.total)
      this.list = cloneDeep(res.result.records)
    }
  }
  // 多选
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }
  // 删除
  handleDel(row) {
    this.$confirm(
      '您确定要删除此条数据吗？请注意，此操作无法还原。',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      this.confirmDelete(row)
    })
  }
  // 删除确认
  async confirmDelete(row) {
    try {
      let ids = row ? [row.taskId] : this.multipleSelection.map(v => v.taskId)
      const res = await this.deleteSchedule(ids)
      if (res.code == 100000) {
        this.msgSuccess('操作成功')
        this.search()
      }
      // this.checkResCode(res.code, this.search)
    } catch (e) {
      console.log(e)
    }
  }
  mounted() {
    this.search()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.tableAreaRef.clientHeight
    })
  }

}
</script>

<style lang="scss" scoped>
.cont-area {
  display: flex;
  flex-direction: column;
  height: 100%;

  .table-area {
    flex: 1;
    overflow: hidden;
    // margin-bottom: 5px;
  }

  .el-form {
    height: 40px;
    box-shadow: 0px 1px 6px -2px rgb(51, 51, 51);
    padding: 0 10px;
    margin-bottom: 5px;
  }
}

.statusBox {
  display: flex;
  justify-content: start;
  align-items: center;

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;

    &.success {
      background: #00B929;
    }

    &.err {
      background: #D33232;
    }
  }
}

.offlineBtn {
  color: #FF7E06;
}
</style>
